<template>
    <div class="settle-sub-box">
        <!--        <div class="dept-list">-->
        <!--            <div class="list" v-for="(item, index) in deptList" :key="index">-->
        <!--                <div class="title"><a :href="'#'+index">{{index}}</a></div>-->
        <!--                <div v-for="(list, i) in item" :key="i">{{list.name}}</div>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="menu-bar">-->
        <!--            <div class="list" v-for="(item, index) in deptList" :key="index" :id="index">-->
        <!--                <div class="name">{{index}}</div>-->
        <!--            </div>-->
        <!--        </div>-->
        <mt-index-list class="dept-list">
            <mt-index-section :index="index" v-for="(item, index) in deptList" :key="index" v-if="item[0]">
                <div v-for="(list, i) in item" :key="i" class="list" @click="chooseList(list)">{{list.name}}</div>
            </mt-index-section>
        </mt-index-list>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                deptList: [],
                isChildren: false
            }
        },
        mounted() {
            if (this.$route.query.isChildren) this.isChildren = this.$route.query.isChildren
            this.$http.get('/index/departmentDataClassification').then(result => {
                if (result.success) {
                    this.deptList = result.data
                }
            })
        },
        methods: {
            chooseList(item) {
                if (this.isChildren) {
                    this.$emit('chooseDept', item)
                    history.back()
                } else {
                    window.$vm.$emit('chooseDept', item)
                }
            }
        },
        components: {},
        beforeRouteLeave(to, from, next) {
            if (this.isChildren) {
                this.$emit('init')
            }
            next()
        }
    }
</script>

<style scoped lang="less">
    .dept-list {
        /deep/ .mint-indexlist-content {
            .mint-indexsection {
                .mint-indexsection-index {
                    padding: 0 .3rem;
                    height: .68rem;
                    line-height: .68rem;
                }

                .list {
                    /*.title {*/
                    /*    padding: 0 .3rem;*/
                    /*    height: .8rem;*/
                    /*    line-height: .8rem;*/
                    /*    background-color: #eee;*/
                    /*    font-size: .3rem;*/
                    /*}*/
                    line-height: .5rem;
                    /*min-height: .8rem;*/
                    padding: .15rem .3rem;
                }
            }
        }
    }

    .menu-bar {
        position: fixed;
        height: 80%;
        top: 10%;
        right: .2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: .3rem;

        .list {
            flex: 1;
            line-height: 1;
            display: flex;
            justify-content: center;
            align-items: center;

            .name {

            }
        }
    }
</style>
